<!--
 * @Author: your name
 * @Date: 2022-03-02 12:50:26
 * @LastEditTime: 2023-08-08 16:03:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-img.vue
-->
<template>
  <!-- <div>

</div> -->
  <!-- 生长数据 -->
  <el-card id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>生长图片 GROWTH PICTURE</span>
    </div>
    <el-row>
      <p>生长记录图片</p>
      <div class="honorary">
        <el-button
          class="prev"
          type="text"
          @click="prev()"
        ><i class="el-icon-arrow-left"></i></el-button>
        <el-carousel
          ref="grofix"
          v-loading="loading"
          arrow="never"
          :autoplay="false"
          indicator-position="none"
        >
          <el-carousel-item
            v-for="(item, index) in growthlist"
            :key="index"
          >
            <div class="imgl">
              <div
                v-for="(item1, index1) in item"
                :key="index1"
                class="imgdet"
                @click="imgUrl(item1.pictureData)"
              >
                <div class="shadows">
                  <div class="shadowx"></div>
                  <el-button
                    class="shadowBut"
                    type="text"
                    @click="imgUrl"
                  >点击查看大图</el-button>
                  <img :src="item1.pictureData" alt="" />
                </div>
                <p class="text">{{ item1.collectDate }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <el-button
          class="next"
          type="text"
          @click="next()"
        ><i class="el-icon-arrow-right"></i></el-button>
      </div>
    </el-row>
    <!-- 通用图片弹出框 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <img :src="selectedpicdata" />
      <!-- </div> -->
    </el-dialog>
  </el-card>
</template>

<script>
// import axios from "axios";
// import { getToken } from "@/utils/auth";
import classiApi from '@/api/trace-source-web/production-api/Information-classification-and-traceability.js'
export default {
  props: {
    batId: {
      type: [String, Number],
      default: () => ''
    }
  },
  data() {
    return {
      growthlist: [],
      batchNo: "",
      selectedpicdata: "",
      dialogFormVisible: false,
      growthPage: 1,
      databaseName: "",
      totalPages: 0,
      loading: false
    };
  },
  created() {
    if (this.batId === "0001G202112217" && sessionStorage.account === 'jg') {
      this.growthPage = 22
    }
  },
  mounted() {
    this.batchNo = this.batId;
    // console.log(batchNo)
    this.databaseName = sessionStorage.databaseName;
    setTimeout(() => {
      this.getgrowthdata();
    }, 200);
  },
  methods: {
    // 弹出框
    imgUrl(e) {
      this.selectedpicdata = e;
      this.dialogFormVisible = true;
    },
    // 生长数据相关
    getgrowthdata() {
      // let nowbatchNo = this.batchNo;
      // console.log(batchNo, this.$webReqUrl)
      // let zhurl = this.$webReqUrl + "traceability/growthRecord/findGrowthAll";
      this.loading = true;
      let params = {
        entity: {
          batchNo: this.batchNo
        },
        page: this.growthPage,
        size: 5,
        sort: "collectTime"
      }
      classiApi.queryReportForm(params).then(res => {
        let list = [];
        if (res.data) {
          this.totalPages = res.data.totalPages;
          list = res.data.content;
        }
        let listtwo = [];
        let newlist = [];
        if (list) {
          list.forEach(async (item, index) => {
            if (item) {
              let pushobj = {
                collectDate: this.dateToFormatname(item.collectTime),
                pictureId: item.pictureId,
                pictureData: require("@/assets/trace-source-manage/topscrback.png")
              };
              if (item.img) {
                pushobj.pictureData = "data:image/png;base64," + item.img;
              }
              listtwo.push(pushobj);
              // listtwo.sort(function(a, b) {
              //   return b.collectDate > a.collectDate ? 1 : -1;
              // });
              if (index === list.length - 1) {
                for (let i = 0; i < listtwo.length; i += 5) {
                  newlist.push(listtwo.slice(i, i + 5));
                }
              }
            }
          });
          setTimeout(() => {
            this.loading = false;
          }, 200);
          if (this.growthPage >= this.totalPages) {
            if (this.totalPages === 0) return;
            this.$message.success("已到最后一页");
          }
        }

        this.growthlist = newlist;
      })
    },
    // 跑马灯左右切换
    prev() {
      this.$refs.grofix.prev();
      this.growthPage = this.growthPage - 1;
      if (this.growthPage <= 1) {
        this.growthPage = 1;
      }
      this.getgrowthdata();
    },
    next() {
      this.$refs.grofix.next();
      this.growthPage = this.growthPage + 1;
      if (this.growthPage >= this.totalPages) {
        this.growthPage = this.totalPages;
      }
      this.getgrowthdata();
    }
  }
};
</script>
<style lang="scss" scoped>
#growing {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-carousel {
    // padding: 10px;
    padding-top: 10px;
    width: 90%;
    .el-carousel__container {
      // background-color: rgba(0,57,71,0.55);
      .el-carousel__item--card {
        width: 40% !important;
      }
    }
  }
  ::v-deep .el-card__body {
    padding: 0 !important;
    padding-bottom: 10px !important;
    p {
      margin-left: 10px;
      font-size: 22px;
    }
  }
  .imgl {
    margin: 0 40px;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    .imgdet {
      border-radius: 0;
      .shadows {
        margin: 2px !important;
        box-sizing: content-box;
        position: relative;
        .shadowx {
          display: none;
          position: absolute;
          width: 100%;
          height: 100%;
          // top: 0;
          // bottom: 0;
          // left: 0;
          // right: 0;
          background-color: rgba(0, 20, 26, 0.71);
        }
        .shadowBut {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
      }
      .shadows:hover {
        // box-sizing: border-box;
        // width: calc(260px - 2px);
        border: 0.1px solid rgba(255, 255, 255, 0.54);
        .shadowBut {
          display: block;
        }
        .shadowx {
          display: block;
        }
      }
      img {
        border: none !important;
        border-radius: 0 !important;
        width: 260px !important;
        height: 180px !important;
      }
      .text {
        text-align: center;
      }
    }
  }
}

.honorary {
  width: 99%;
  height: 320px;
  margin: 10px 10px auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  background: #0f4656;
  align-items: center;
}
.next {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}
.prev {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
</style>
